<template>
  <ScalablePage>
    <template #default="{ scale }">
      <div class="resolution">
        <FirstLevelTitle text="供水能力" more="更多>>>"></FirstLevelTitle>
        <div style="display: flex; margin-top: 2px; column-gap: 50px">
          <div style="width: 170px">
            <secondary-title text="水库实时库容" more="更多>>>"></secondary-title>
            <div class="you4">
              <p>{{ storageCapacity }}</p>
            </div>
          </div>
          <div>
            <secondary-title text="水库实时液位" more="更多>>>"></secondary-title>
            <div style="display: flex">
              <SphericalDiagram :scale="scale" :data="liquidLevel" />
              <div class="water-supply">
                <p class="water-supply-title">今日供水量</p>
                <p class="water-supply-cont">
                  <span>实际：</span><span style="color: #f8bd02">{{ dayData }}万吨</span>
                  <span style="margin-left: 10px">能力：<span style="color: #f8bd02">{{ 20.0 }}万吨</span></span>
                </p>
                <div class="progress-bar">
                  <div class="progress-gradient"></div>
                </div>
                <p class="water-supply-title">月累计供水量</p>
                <p class="water-supply-cont">
                  <span>实际：<span style="color: #f8bd02">{{ monthData }}万吨</span></span>
                </p>
                <div class="progress-bar">
                  <div class="progress-gradient"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <FirstLevelTitle text="监测指标" more="更多>>>"></FirstLevelTitle>
        <div style="display: flex; margin-top: 2px">
          <div class="you9">
            <div class="you9-title">原水</div>
            <div style="
                position: absolute;
                left: 8px;
                top: 23px;
                line-height: 18px;
                font-size: 8px;
                color: rgb(204 209 216);
              ">
              <div :style="{
                color: Number(internetTrafficRef) > 10000 ? 'red' : '',
              }">
                流量
              </div>
              <div>浊度</div>
              <div :style="{ 'color': Number(PHvalue) >= 7.5 && Number(PHvalue) <= 8.5 ? '' : 'red' }">ph</div>
              <div :style="{ 'color': Number(ammoniaNitrogen) >= 0 && Number(ammoniaNitrogen) <= 0.5 ? '' : 'red' }">氨氮
              </div>
              <div :style="{ 'color': Number(COD) >= 0.3 && Number(COD) <= 3 ? '' : 'red' }">高锰酸盐指数</div>
            </div>
            <div style="
                position: absolute;
                left: 40px;
                top: 23px;
                line-height: 18px;
              ">
              <p :style="{
                color: Number(internetTrafficRef) > 10000 ? 'red' : '',
              }">
                {{ internetTrafficRef }}
              </p>
              <p>{{ turbidity }}</p>
              <p :style="{
                color:
                  Number(PHvalue) >= 7.5 && Number(PHvalue) <= 8.5
                    ? ''
                    : 'red',
              }">
                {{ PHvalue }}
              </p>
              <p :style="{
                color:
                  Number(ammoniaNitrogen) >= 0 &&
                    Number(ammoniaNitrogen) <= 0.5
                    ? ''
                    : 'red',
              }">
                {{ ammoniaNitrogen }}
              </p>
              <p :style="{
                color: Number(COD) >= 0.3 && Number(COD) <= 3 ? '' : 'red',
              }" style="position: absolute; left: 22px; top: 72px">
                {{ COD }}
              </p>
            </div>

            <div style="
                position: absolute;
                left: 84px;
                top: 19px;
                line-height: 18px;
                font-size: 8px;
                color: rgb(204 209 216);
              ">
              <div :style="{
                color: Number(internetTrafficRef) > 10000 ? 'red' : '',
              }">
                m<sup>3</sup>/h
              </div>
              <div>NTU</div>
              <div style="min-height: 18px"></div>
              <div :style="{
                color:
                  Number(ammoniaNitrogen) >= 0 &&
                    Number(ammoniaNitrogen) <= 0.5
                    ? ''
                    : 'red',
              }">
                mg/L
              </div>
              <div :style="{
                color: Number(COD) >= 0.3 && Number(COD) <= 3 ? '' : 'red',
              }">
                mg/L
              </div>
            </div>
          </div>
          <div class="you10-v2">
            <div class="you10-v2-title">沉淀池</div>
            <div style="
                position: absolute;
                left: 8px;
                top: 22px;
                line-height: 18px;
                color: rgb(204 209 216);
              ">
              <div :style="{
                color:
                  Number(internetTraffic) >= 500 &&
                    Number(internetTraffic) <= 3000
                    ? ''
                    : 'red',
              }">
                流量
              </div>
              <div :style="{ color: Number(turbidityABC) > 2 ? 'red' : '' }">
                浊度
              </div>
            </div>
            <div style="
                position: absolute;
                left: 54px;
                top: 22px;
                line-height: 18px;
              ">
              <p :style="{
                color:
                  Number(internetTraffic) >= 500 &&
                    Number(internetTraffic) <= 3000
                    ? ''
                    : 'red',
              }">
                {{ internetTraffic }}
              </p>
              <p :style="{ color: Number(turbidityABC) > 2 ? 'red' : '' }">
                {{ turbidityABC }}
              </p>
            </div>
            <div style="
                position: absolute;
                left: 78px;
                top: 21px;
                line-height: 18px;
                font-size: 8px;
                color: rgb(204 209 216);
              ">
              <div :style="{
                color:
                  Number(internetTraffic) >= 500 &&
                    Number(internetTraffic) <= 3000
                    ? ''
                    : 'red',
              }">
                m<sup>3</sup>/h
              </div>
              <div>NTU</div>
            </div>

            <div class="you10-v2-title-2">翻板滤池</div>
            <div style="
                position: absolute;
                left: 8px;
                top: 75px;
                line-height: 18px;
                color: rgb(204 209 216);
              ">
              <div :style="{
                color:
                  Number(Copyturbidity) >= 0 && Number(Copyturbidity) <= 3
                    ? ''
                    : 'red',
              }">
                浊度
              </div>
              <div :style="{
                color: Number(AccumulatedTraffic) > 750 ? 'red' : '',
              }">
                流量累加
              </div>
            </div>
            <div style="
                position: absolute;
                left: 54px;
                top: 75px;
                line-height: 18px;
              ">
              <p :style="{
                color:
                  Number(Copyturbidity) >= 0 && Number(Copyturbidity) <= 3
                    ? ''
                    : 'red',
              }">
                {{ Copyturbidity }}
              </p>
              <p :style="{
                color: Number(AccumulatedTraffic) > 750 ? 'red' : '',
              }">
                {{ AccumulatedTraffic }}
              </p>
            </div>
            <div style="
                position: absolute;
                left: 78px;
                top: 75px;
                line-height: 18px;
                font-size: 8px;
                color: rgb(204 209 216);
              ">
              <div :style="{
                color:
                  Number(Copyturbidity) >= 0 && Number(Copyturbidity) <= 3
                    ? ''
                    : 'red',
              }">
                NTU
              </div>
              <div :style="{
                color: Number(AccumulatedTraffic) > 750 ? 'red' : '',
              }">
                L/h
              </div>
            </div>
          </div>

          <div class="you11">
            <div class="you11-title">送水泵房</div>
            <div style="
                position: absolute;
                left: 8px;
                top: 22px;
                line-height: 17.8px;
                color: rgb(204 209 216);
              ">
              <div :style="{ color: Number(clearWater1) > 3.5 ? 'red' : '' }">
                清水池液位1
              </div>
              <div :style="{ color: Number(clearWater2) > 3.5 ? 'red' : '' }">
                清水池液位2
              </div>
              <div :style="{
                color:
                  Number(residualAmmonia) >= 0.3 &&
                    Number(residualAmmonia) <= 0.4
                    ? ''
                    : 'red',
              }">
                余氯
              </div>
              <div :style="{ color: Number(turbidity642) > 0.2 ? 'red' : '' }">
                浊度
              </div>
              <div :style="{
                color:
                  Number(headerPressure) >= 0.7 &&
                    Number(headerPressure) <= 0.75
                    ? ''
                    : 'red',
              }">
                总管压力
              </div>
              <div :style="{ color: Number(chushui) > 9000 ? 'red' : '' }">
                流量
              </div>
            </div>
            <div style="
                position: absolute;
                left: 55px;
                top: 22px;
                line-height: 17.8px;
              ">
              <p :style="{ color: Number(clearWater1) > 3.5 ? 'red' : '' }">
                {{ clearWater1 }}
              </p>
              <p :style="{ color: Number(clearWater2) > 3.5 ? 'red' : '' }">
                {{ clearWater2 }}
              </p>
              <p :style="{
                color:
                  Number(residualAmmonia) >= 0.3 &&
                    Number(residualAmmonia) <= 0.4
                    ? ''
                    : 'red',
              }">
                {{ residualAmmonia }}
              </p>
              <p :style="{ color: Number(turbidity642) > 0.2 ? 'red' : '' }">
                {{ turbidity642 }}
              </p>
              <p :style="{
                color:
                  Number(headerPressure) >= 0.7 &&
                    Number(headerPressure) <= 0.75
                    ? ''
                    : 'red',
              }">
                {{ headerPressure }}
              </p>
              <p :style="{ color: Number(chushui) > 9000 ? 'red' : '' }">
                {{ chushui }}
              </p>
            </div>
            <div style="
                position: absolute;
                left: 78px;
                top: 21px;
                line-height: 17.5px;
                font-size: 8px;
                color: rgb(204 209 216);
              ">
              <div :style="{ color: Number(clearWater1) > 3.5 ? 'red' : '' }">
                m
              </div>
              <div :style="{ color: Number(clearWater2) > 3.5 ? 'red' : '' }">
                m
              </div>
              <div :style="{
                color:
                  Number(residualAmmonia) >= 0.3 &&
                    Number(residualAmmonia) <= 0.4
                    ? ''
                    : 'red',
              }">
                mg/L
              </div>
              <div :style="{ color: Number(turbidity642) > 0.2 ? 'red' : '' }">
                NTU
              </div>
              <div :style="{
                color:
                  Number(headerPressure) >= 0.7 &&
                    Number(headerPressure) <= 0.75
                    ? ''
                    : 'red',
              }">
                MP
              </div>
              <div :style="{ color: Number(chushui) > 9000 ? 'red' : '' }">
                m<sup>3</sup>/h
              </div>
            </div>
          </div>
          <div class="you12">
            <div class="you12-title">水泵</div>
            <div style="
                display: flex;
                column-gap: 6px;
                text-align: center;
                position: absolute;
                top: 25px;
                left: 7px;
                color: rgb(204, 209, 216);
              ">
              <div>水泵</div>
              <div>定子温度</div>
              <div>轴承温度</div>
            </div>
            <div>
              <!-- 水泵 -->
              <div style="
                  position: absolute;
                  left: 15px;
                  top: 35px;
                  line-height: 13px;
                ">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
              </div>
              <!-- 定子温度 -->
              <div style="
                  position: absolute;
                  left: 39px;
                  top: 35px;
                  line-height: 13px;
                ">
                <div>{{ StatorTemperature[0] }}&#176;c</div>
                <div>{{ StatorTemperature[1] }}&#176;c</div>
                <div>{{ StatorTemperature[2] }}&#176;c</div>
                <div>{{ StatorTemperature[3] }}&#176;c</div>
                <div>{{ StatorTemperature[4] }}&#176;c</div>
                <div>{{ StatorTemperature[5] }}&#176;c</div>
                <div>{{ StatorTemperature[6] }}&#176;c</div>
              </div>
              <!-- 轴承温度 -->
              <div style="
                  position: absolute;
                  left: 71px;
                  top: 35px;
                  line-height: 13px;
                ">
                <div>{{ bearing[0] }}&#176;c</div>
                <div>{{ bearing[1] }}&#176;c</div>
                <div>{{ bearing[2] }}&#176;c</div>
                <div>{{ bearing[3] }}&#176;c</div>
                <div>{{ bearing[4] }}&#176;c</div>
                <div>{{ bearing[5] }}&#176;c</div>
                <div>{{ bearing[6] }}&#176;c</div>
              </div>
            </div>
          </div>
        </div>
        <FirstLevelTitle text="能耗情况" more="更多>>>"></FirstLevelTitle>
        <!-- <img style="width: 90%;" src="@/assets/images/home-page/right/you14.png" alt=""> -->
        <Discounting :scale="scale" />
      </div>
    </template>
  </ScalablePage>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件
// 折现统计图组件
import Discounting from "./components/discounting.vue";
// 球形水柱图
import SphericalDiagram from "./components/Spherical-diagram.vue";
import { prodApi } from "@/utils/shuiwu/api";
import { getWaterSupply } from "@/utils/shuiwu/api";
import { waterApi } from "@/utils/shuiwu/api";
import { shortPolling } from "@/utils/Polling";

const monthData = ref("0");
const dayData = ref("0");

// 浊度
const turbidity = ref("0");
const PHvalue = ref("0");
const ammoniaNitrogen = ref("0");
const COD = ref("0");

const internetTraffic = ref("0");

const turbidityABC = ref("0");
const Copyturbidity = ref("0");
const AccumulatedTraffic = ref("0");

const clearWater1 = ref("0");
const clearWater2 = ref("0");
const residualAmmonia = ref("0");
const turbidity642 = ref("0");
const headerPressure = ref("0");
const internetTrafficRef = ref("0");
const chushui = ref("0");

const bearing = ref([0, 0, 0, 0, 0, 0, 0]);
const StatorTemperature = ref([0, 0, 0, 0, 0, 0, 0]);

const storageCapacity = ref(0);
const liquidLevel = ref("0");

// 获取时间
function getCurrentYearMonth(): string {
  const date = new Date(); // 获取当前日期
  const year = date.getFullYear(); // 获取当前年份
  const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 获取当前月份，并补零
  return `${year}-${month}`; // 返回 yyyy-MM 格式的字符串
}

async function getShuiKu(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    arr.forEach((element) => {
      if (element.modelId == 4379) {
        storageCapacity.value = element.value;
      }
      if (element.modelId == 4378) {
        liquidLevel.value = element.value;
      }
    });
  });
}

function getChuShui(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let totalnum = 0;
    for (let i = 0; i < arr.length; i++) {
      if (
        arr[i].modelId == 4631 ||
        arr[i].modelId == 4633 ||
        arr[i].modelId == 4634 ||
        arr[i].modelId == 4636 ||
        arr[i].modelId == 4637 ||
        arr[i].modelId == 4638 ||
        arr[i].modelId == 4639 ||
        arr[i].modelId == 4640
      ) {
        totalnum += Number(arr[i].value);
      }
    }
    chushui.value = totalnum;
  });
}

// 原水
async function rawWater(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    arr.forEach((element) => {
      // 浊度
      if (element.modelId == 4377) {
        turbidity.value = element.value;
      }
      // PH
      if (element.modelId == 4381) {
        PHvalue.value = element.value;
      }
      // 氨氮
      if (element.modelId == 4380) {
        ammoniaNitrogen.value = element.value;
      }
      // COD
      // if (element.modelId == 4958) {
      //   console.log(element.value, "&&&&&")
      //   COD.value = element.value;
      // }
    });
  });
}

// 沉淀池
async function SedimentationTank(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    let data1;
    let data2;
    let data3;
    arr.forEach((element) => {
      if (element.modelId == 4904) {
        data1 = element.value;
      }
      if (element.modelId == 4905) {
        data2 = element.value;
      }
      if (element.modelId == 4903) {
        data3 = element.value;
      }

      if (element.modelId == 4907) {
        turbidityABC.value = element.value;
      }
      internetTraffic.value = Number(data1) + Number(data2) + Number(data3);
    });
  });
}

// 翻版虚池
async function PiratedVirtualPool(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    let datavalvue1;
    let datavalvue12;
    arr.forEach((element) => {
      if (element.modelId == 4909) {
        datavalvue1 = element.value;
      }
      if (element.modelId == 4910) {
        datavalvue12 = element.value;
      }

      if (element.modelId == 4908) {
        Copyturbidity.value = element.value;
      }
      AccumulatedTraffic.value = Number(datavalvue1) + Number(datavalvue12);
    });
  });
}

// 送水泵房
async function WaterSupplyPumpRoom(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    arr.forEach((element) => {
      if (element.modelId == 4645) {
        clearWater1.value = element?.value || 0;
      }
      if (element.modelId == 4647) {
        clearWater2.value = element?.value || 0;
      }
      if (element.modelId == 4642) {
        residualAmmonia.value = element.value;
      }

      if (element.modelId == 4641) {
        turbidity642.value = element.value;
      }

      if (element.modelId == 4643) {
        headerPressure.value = element.value;
      }

      /**
       * 定子温度
       */
      if (element.modelId == 4651) {
        StatorTemperature.value[0] = element.value;
      }
      if (element.modelId == 4667) {
        StatorTemperature.value[1] = element.value;
      }
      if (element.modelId == 4683) {
        StatorTemperature.value[2] = element.value;
      }
      if (element.modelId == 4700) {
        StatorTemperature.value[3] = element.value;
      }
      if (element.modelId == 4718) {
        StatorTemperature.value[4] = element.value;
      }
      if (element.modelId == 4737) {
        StatorTemperature.value[5] = element.value;
      }
      if (element.modelId == 4754) {
        StatorTemperature.value[6] = element.value;
      }

      /**
       * 轴承
       */
      if (element.modelId == 4663) {
        bearing.value[0] = element.value;
      }
      if (element.modelId == 4679) {
        bearing.value[1] = element.value;
      }
      if (element.modelId == 4696) {
        bearing.value[2] = element.value;
      }
      if (element.modelId == 4713) {
        bearing.value[3] = element.value;
      }
      if (element.modelId == 4733) {
        bearing.value[4] = element.value;
      }
      if (element.modelId == 4421) {
        bearing.value[5] = element.value;
      }
      if (element.modelId == 4769) {
        bearing.value[6] = element.value;
      }
    });
  });
}

async function internetTrafficData(id: number) {
  prodApi(id).then((res) => {
    let resData = res.rows as any;
    let internetTrafficData1;
    let internetTrafficData2;

    resData.forEach((element) => {
      if (element.modelId == 4387) {
        internetTrafficData1 = element.value;
      }
      if (element.modelId == 4388) {
        internetTrafficData2 = element.value;
      }
      // COD
      if (element.modelId == 4958) {
        console.log(element.value, "&&&&&")
        COD.value = element.value;
      }
    });
    internetTrafficRef.value =
      Number(internetTrafficData1) + Number(internetTrafficData2);
  });
}

async function waterSupply() {

  getWaterSupply({ type: '5', time: getCurrentYearMonth() }).then(res => {

    if (res.data?.value) {
      monthData.value = (res.data?.value / 10000).toFixed(2);
    }
  })
  getWaterSupply({ type: '2' }).then(res => {
    if (res.data?.value) {
      dayData.value = (res.data?.value / 10000).toFixed(2);
    }
  })



}

onMounted(() => {
  getChuShui(642);
  shortPolling(() => getShuiKu(632), 10000);
  shortPolling(() => rawWater(631), 10000);
  shortPolling(() => SedimentationTank(643), 10000);
  shortPolling(() => PiratedVirtualPool(635), 10000);
  shortPolling(() => WaterSupplyPumpRoom(642), 10000);
  shortPolling(() => internetTrafficData(634), 10000);
  shortPolling(() => waterSupply(), 10000);
});
</script>

<style scoped lang="less">
@import "@/assets/common/font.css";

.resolution {
  .First-img {
    width: 324px;
    height: 26px;
  }

  .secondary-img {
    width: 171px;
  }
}

.you4 {
  width: 135px;
  height: 95px;
  background-image: url("@/assets/images/home-page/right/you4.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
  font-size: 9px;

  p {
    text-align: center;
    line-height: 115px;
  }
}

.you5 {
  width: 94px;
  height: 89px;
  background-image: url("@/assets/images/home-page/right/you5.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  margin-right: 30px;

  p {
    text-align: center;
    width: 85px;
    height: 110px;
    font-weight: bold;
    color: #fff;
    font-size: 15px;
    line-height: 67px;
  }
}

.you9 {
  width: 248px;
  height: 144px;
  margin-right: 10px;
  background-image: url("@/assets/images/home-page/right/you9.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
  font-size: 10px;

  .you9-title {
    position: absolute;
    font-size: 12px;
    left: 40px;
    font-family: YSBT;
    top: 4px;
  }
}

.you10-v2 {
  width: 248px;
  height: 144px;
  margin-right: 10px;
  background-image: url("@/assets/images/home-page/right/you9.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
  font-size: 8px;

  .you10-v2-title {
    position: absolute;
    font-size: 12px;
    font-family: YSBT;
    left: 37px;
    top: 4px;
  }

  .you10-v2-title-2 {
    width: 92px;
    height: 14px;
    position: absolute;
    top: 60px;
    left: 8px;
    background-image: url("@/assets/images/home-page/right/you10_v2.png");
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 12px;
    font-family: YSBT;
    text-align: center;
    line-height: 14px;
  }
}

.you11 {
  width: 248px;
  height: 144px;
  margin-right: 10px;
  background-image: url("@/assets/images/home-page/right/you9.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
  font-size: 8px;

  .you11-title {
    position: absolute;
    font-size: 12px;
    left: 29px;
    font-family: YSBT;
    top: 4px;
  }
}

.you12 {
  width: 248px;
  height: 144px;
  margin-right: 10px;
  background-image: url("@/assets/images/home-page/right/you9.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
  font-size: 8px;

  .you12-title {
    position: absolute;
    font-size: 12px;
    left: 40px;
    font-family: YSBT;
    top: 4px;
  }
}

.progress-bar {
  width: 139px;
  height: 5px;
  background-color: #0a2a4a;
  overflow: hidden;
  clip-path: polygon(0% 0, 100% 0%, 95% 100%, 0% 100%);
  position: relative;
}

.progress-gradient {
  width: 60%;
  height: 100%;
  background: linear-gradient(to right,
      #0a2a4a 0%,
      #1d4d28 30%,
      #f5c518 80%,
      #f8bd02 100%);
  clip-path: polygon(0% 0, 100% 0%, 93% 100%, 0% 100%);
}

.water-supply {
  color: #fff;
  font-size: 10px;

  .water-supply-title {
    font-size: 12px;
    padding: 2px 0;
  }

  .water-supply-cont {
    padding: 3px 0;
  }
}
</style>